<template>
  <div id="supplierInform">
    <div class="makeHeader">
      <el-row type="flex" justify="space-between" align="center">
        <el-col :span="10" style="display: flex"
          ><span style="width: 60px; height: 40px; line-height: 40px">搜索：</span
          ><el-input v-model="projectInput"></el-input
        ></el-col>
        <el-col :span="7" style="display: flex"
          ><el-button type="primary" @click="searchHandler">查询</el-button
          ><el-button plain @click="resetHandler">重置</el-button></el-col
        >
        <el-col :span="7" style="display: flex"></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" align="center" class="mt-10">
        <el-col :span="2" style="display: flex"
          ><el-button type="primary" @click="addHandler">新增</el-button>
        </el-col>
        <el-col :span="20" style="display: flex"></el-col>
        <el-col :span="2" :pull="1" style="display: flex"></el-col>
      </el-row>
    </div>

    <el-row class="contentDiv">
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
        height="720"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
      >
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column
          prop="name"
          label="部门名称"
          align="center"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="principalName"
          label="负责人"
          align="center"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="contactNumber"
          label="联系电话"
          align="center"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
          min-width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="200"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="editHandler(scope.row)">编辑</el-button>
            <el-button
              type="text"
              style="color: red"
              @click="deleteOrgApi({ idList: [scope.row.id] })"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="footerDiv mt-10" style="text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <!-- 编辑 -->
    <el-dialog
      :title="editTitle"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="from"
        ref="from"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row class="mgb-10 from">
          <el-form-item label="公司名称:">
            <el-select
              style="width: 100%"
              v-model="from.companyId"
              placeholder="请选择"
              @change="companyIdForOrgListHandler"
              disabled
            >
              <el-option
                v-for="item in companyOptions"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="mgb-10 from">
          <el-form-item label="父级部门:" prop="parentIds">
            <el-cascader
              style="width: 100%"
              v-model="from.parentIds"
              :options="orgOptions"
              :show-all-levels="false"
              @change="getOrgTreeHandler"
              :props="{
                label: 'name',
                value: 'id',
                children: 'children',
                checkStrictly: true,
              }"
            ></el-cascader>
          </el-form-item>
        </el-row>
        <!-- <el-row class="mgb-10 from">
          <el-form-item label="部门名称:">
            <el-input placeholder="部门名称" v-model="from.name"> </el-input>
          </el-form-item>
        </el-row> -->
        <el-row class="mgb-10 from">
          <el-form-item label="部门名称:" prop="name">
            <el-input placeholder="部门名称" v-model="from.name"> </el-input>
          </el-form-item>
        </el-row>
        <el-row class="mgb-10 from">
          <el-form-item label="负责人:" prop="principalId">
            <!-- <el-input
              placeholder="负责人"
              v-model="from.principalId"
            >
            </el-input> -->
            <el-select
              style="width: 100%"
              v-model="from.principalId"
              placeholder="请选择责任人"
            >
              <el-option
                v-for="item in manOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="mgb-10 from">
          <el-form-item label="联系电话:" prop="contactNumber">
            <el-input placeholder="联系电话" v-model="from.contactNumber"> </el-input>
          </el-form-item>
        </el-row>
        <el-row class="mgb-10 from">
          <el-form-item label="备注:">
            <el-input placeholder="备注" v-model="from.remark"> </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button type="primary" @click="editSaveHandler('from')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllCompanyList,
  getAllOrg,
  getOrgTree,
  saveOrg,
  deleteOrg,
  updateOrg,
} from "/src/http/backstageManage/sysMg/departManage.js";
import { getEnableUserList } from "/src/http/commonApi.js";
export default {
  data() {
    return {
      editDialogStatus: false,
      projectInput: "",
      renderData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isSearch: false,
      // edit
      editTitle: "",
      editDialogStatus: false,
      editProjectIdentifyInput: "",
      editProjectInput: "",
      manOptions: [],
      companyOptions: [
        {
          companyId: this.$store.state.userInfo.companyId,
          companyName: this.$store.state.userInfo.companyName,
        },
      ], //公司列表
      orgOptions: [
        {
          id: 0,
          name: "/",
          children: null,
        },
      ], // 部门列表
      from: {
        id: null,
        companyId: this.$store.state.userInfo.companyId,
        pid: null,
        parentIds: null,
        name: "",
        principalId: null,
        contactNumber: "",
        remark: "",
      },
      rules: {
        parentIds: [{ required: true, message: "请选择父级部门", trigger: "blur" }],
        name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
        principalId: [{ required: true, message: "请输入负责人", trigger: "blur" }],
        contactNumber: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
      },
      companyId: this.$store.state.userInfo.companyId,
    };
  },

  mounted() {
    this.getOrgTreeApi(this.companyId, false);
    this.getEnableUserListApi();
  },

  methods: {
    // 搜索
    searchHandler() {
      this.isSearch = true;
      if (this.projectInput === "") {
        this.$message({
          message: "请输入查询条件",
          type: "warning",
        });
      } else {
        // this.getProjectListApi(1, this.pageSize, this.projectInput);
      }
    },
    // 重置
    resetHandler() {
      this.getProjectListApi();
      this.projectInput = "";
      this.isSearch = false;
    },
    shuaxin() {
      // this.getProjectListApi();
      // this.projectInput = "";
      // this.isSearch = false;
    },
    // 新增
    addHandler() {
      this.from = {
        id: null,
        companyId: this.$store.state.userInfo.companyId,
        pid: null,
        parentIds: null,
        name: "",
        shortName: "",
        code: "",
        remark: "",
      };
      this.getOrgTreeApi(this.companyId, true);
      this.editTitle = "新增";
      this.editDialogStatus = true;
      // 将this.from中除了companyId的其他属性置空
    },
    //   编辑
    editHandler(v) {
      this.getOrgTreeApi(this.companyId, true);
      this.editTitle = "编辑";
      this.from = v;
      this.editDialogStatus = true;
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      if (this.isSearch === true) {
        // this.getProjectListApi(1, v, this.projectInput);
      } else {
        // this.getProjectListApi(1, v);
      }
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v;
      if (this.isSearch === true) {
        // this.getProjectListApi(v, this.pageSize, this.projectInput);
      } else {
        // this.getProjectListApi(v, this.pageSize);
      }
    },
    //
    companyIdForOrgListHandler(v) {
      this.getOrgTreeApi(v);
    },
    getOrgTreeHandler(v) {
      this.from.pid = v[v.length - 1];
      this.from.parentIds = v.toString();
    }, // editDialog保存
    editSaveHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editTitle == "新增") {
            this.saveOrgApi(this.from);
          } else {
            this.updateOrgApi(this.from);
          }
        } else {
          return false;
        }
      });
    },

    /**
     * 接口
     */
    // 获取启用人员
    getEnableUserListApi() {
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data;
        }
      });
    },
    // 通过公司id获取组织树
    getOrgTreeApi(companyId, isList = false) {
      console.log("isList::: ", isList);
      let params = {
        companyId,
      };
      getOrgTree(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data;
        }
      });
      if (isList) {
        getOrgTree(params).then((res) => {
          if (res.code == 200) {
            if (res.data.length !== 0) {
              this.orgOptions[0].children = res.data;
            } else {
              this.orgOptions[0].children = null;
            }
          }
        });
      } else {
      }
    },
    // 保存组织
    saveOrgApi(params) {
      saveOrg(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.editDialogStatus = false;
          this.getOrgTreeApi(this.companyId, false);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 编辑组织
    updateOrgApi(params) {
      updateOrg(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("编辑成功");
          this.editDialogStatus = false;
          this.getOrgTreeApi(this.companyId, false);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 删除组织
    deleteOrgApi(params) {
      console.log("params::: ", params);
      this.$confirm("此操作将永久删除该信息?", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteOrg(params).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.editDialogStatus = false;
              this.getOrgTreeApi(this.companyId, false);
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查询项目列表
    getProjectListApi(pageNum = 1, pageSize = 10, name = "") {
      let params = {
        pageNum,
        pageSize,
        name,
      };

      console.log(params);

      //   getProjectList(params).then((res) => {
      //     if (res.code == 200) {
      //       this.renderData = res.data.records;
      //       this.total = res.data.total;
      //       this.pageSize = res.data.size;
      //     }
      //   });
    },
    // 项目详情
    projectDetailApi(params) {
      console.log(params);
      //   projectDetail(params).then((res) => {
      //     console.log("res::: ", res);
      //   });
    },
    // 新增项目
    addProjectApi(params) {
      console.log(params);

      this.renderData.push({
        bdmc: "项目组",
        fzr: "罗浩",
        lxdh: "15178928201",
        cz: "15178928201",
        dzyh: "1343527565@qq.com",
        bz: "",
      });

      //   addProject(params).then((res) => {
      //     if (res.code == 200) {
      //       let pgn =
      //         Number.isInteger(this.total / this.pageSize) == true
      //           ? this.total / this.pageSize + 1
      //           : Math.ceil(this.total / this.pageSize);
      //       this.getProjectListApi(pgn, this.pageSize);
      //       this.$message.success("新增成功");
      //     } else {
      //       this.$message.error("新增失败");
      //     }
      //   });
    },
    // 编辑项目
    updateProjectApi(params) {
      console.log(params);
      //   updateProject(params).then((res) => {
      //     if (res.code == 200) {
      //       this.getProjectListApi(this.currentPage, this.pageSize);
      //       this.$message.success("编辑成功");
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   });
    },
    // 删除项目
    deleteProjectApi(idList = "") {
      let params = { idList };
      console.log(params);
      //   deleteProject(params).then((res) => {
      //     let pgn =
      //       Number.isInteger(this.total / this.pageSize) == true
      //         ? this.total / this.pageSize + 1
      //         : Math.ceil(this.total / this.pageSize);
      //     if (res.code == 200 && this.search === true) {
      //       this.getProjectListApi(pgn, this.pageSize, this.projectInput);
      //       this.$message.success("删除成功");
      //     } else if (res.code == 200 && this.search === false) {
      //       this.getProjectListApi(pgn, this.pageSize);
      //       this.$message.success("删除成功");
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   });
    },
  },
};
</script>

<style lang="less" scoped>
.contentDiv,
.makeHeader {
  width: 100%;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
}
#supplierInform {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .from {
    .el-input-group__prepend {
      width: 110px;
    }
  }
}
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 5px;
}
</style>
<style lang="less">
#supplierInform {
  .from {
    .el-input-group__prepend {
      width: 120px;
    }
    .el-select {
      width: 500px;
    }
  }
}
</style>
